<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Commuters Connect</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet">
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDbV_siUtityrz0X3Ptd7HBlkO26UFgjgs&sensor=true"> </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      /*We default to leaving you room to scroll the form back.*/
      #map_canvas { height: 90% }
      @media screen and (min-width: 600px) {
        /* Unless your screen is rather large and the form is beside the map
        anyway. */
        #contentBar {
          float: left;
          width: 250px;
          padding-left: 1em;
          overflow-x: auto;
          height: 100%;
        }
        #map_canvas { height: 100% }
      }
      .explanation {
        height: 4em;
        padding: 1em;
        vertical-align: middle;
      }
      label {
        font-weight: bold;
      }
      .radioButtons {/* Not using CSS3 in an attempt to be more browser friendly. */
        /* Also, not sure why Bootstrap leaves radio buttons as block level... */
        display: inline;
        width: 1em;
      }
      #signUpButton, #signInButton {
        width: 220px;
      }


    </style>
  </head>
  <body>
    <div id="contentBar">
      <h1>
        <div class="logo">
          <div class="line1">Commuters</div>
          <div class="line2">Connect</div>
        </div>
      </h1>
      <div class="explanation"></div>
      <div class="lift:Registration">
        <div class="lift:msgs?showAll=true"></div>
        <div id="registrationForm">
          <form name="registration" method="post" class="registrationForm lift:form.ajax">
            <label>
              Email Address
              <input type="text" name="emailAddress" />
            </label>
            <label>
              <input class="radioButtons" type="radio" name="existingUser" value="no" checked="true" />
              I'm new.
            </label>
            <label>
              <input class="radioButtons" type="radio" name="existingUser" value="yes" />
              I have already signed up.
            </label>
            <fieldset class="newUsers">
              <label>
                First Name
                <input type="text" name="firstName"/>
              </label>
              <label>
                Last Name
                <input type="text" name="lastName"/>
              </label>
              <label>
                Organization
                <input type="text" name="organization" placeholder="group affiliation" />
              </label>
              <label>
                Mobile Phone Number
                <input type="text" name="mobilePhone" placeholder="want SMS alerts?" />
              </label>
              <label>
                Choose Password
                <input type="password" name="newPassword" />
              </label>
              <button id="signUpButton" class="btn btn-primary">Sign Up</button>
            </fieldset>
            <fieldset class="existingUsers">
              <label>
                Password
                <input id="password" type="password" name="password" />
              </label>
              <button type="submit" id="signInButton" class="btn btn-primary">Sign In</button>
            </fieldset>
          </form>
        </div>
        <div id="welcomeBack">
          Hello <span class="userFirstName">User name</span>. (not <a class="wrongUser">you?</a>)
        </div>
        <div id="reports">
          <h5>My Activity</h5>
          <ul>
            <li class="report"><a class="reportSubject">Subject</a></li>
          </ul>
        </div>
        <div id="toolbars">
          <h5>Actions</h5>
          <a href="newReport" class="btn">New Report</a>
        </div>
      </div>
    </div>
    <div id="map_canvas"></div>
    <script type="text/javascript" src="js/bootstrap.min.js"> </script>
    <script type="text/javascript" src="js/index.js"> </script>
  </body>
</html>

